<template>
  <!-- 文章模块 -->
  <h2 class="article-title clearfix">最新发布</h2>
  <ul v-infinite-scroll="load" style="overflow:auto">
    <li class="sticky-article clearfix" v-for="(item, index) in pageArticleData" :key="item._id">
      <div class="article-img">
        <a :href="`/article/${item._id}`">
        <img :src="baseURL + item.coverUrl" alt=""/>
        </a>
      </div>
      <h2 class="article-t">
        <a :href="`/article/${item._id}`">{{ item.title }}</a>
      </h2>
      <p class="article-txt">{{item.describe}}</p>
      <p class="article-san">
        <span class="a-dayuan"
          ><i class="iconfont icon-user"></i> {{ item.type }}</span
        >
        <span class="a-time"
          ><i class="iconfont icon-iconset0112 time21"></i
          >{{ formatDate(item.date) }}</span
        >
        <span class="a-eye"
          ><i class="iconfont icon-icon-eye-open eye21"></i
          >{{ item.readingNum}}</span
        >
      </p>
    </li>
  </ul>
</template>

<script>
export default {
  name: "Articles",
  data() {
    return {
      pageArticleData: [], //文章数据列表
      allArticleData: [], //所有文章数据
      skip: 6,
    };
  },
  methods: {
    // 请求所有的文章数据
    async getArticles() {
      let { data } = await this.$axios({
        method: "GET",
        url: "/getdata/article",
      });
      if (data.code) return this.$message.error(data.message);
      this.allArticleData = data.data; // 所有文章数据给allArticle
      this.pageArticleData.push(...this.allArticleData.slice(0, this.skip));
    },
    // 时间格式转换
    formatDate(date) {
      let d = new Date(date),
        YY = d.getFullYear(),
        MM = d.getMonth() + 1,
        DD = d.getDate(),
        hh = d.getHours(),
        mm = d.getMinutes(),
        ss = d.getSeconds();
      hh = hh < 10 ? "0" + hh : hh;
      mm = mm < 10 ? "0" + mm : mm;
      ss = ss < 10 ? "0" + ss : ss;
      return `${YY}-${MM}-${DD}`;
    },
    load() {
      // if(!this.allArticleData.length) return; //表示不存在文章数据时
      this.pageArticleData.push(...this.allArticleData.slice(this.skip, this.skip+4));
      this.skip +=4;
    },
  },
  created() {
    this.getArticles();
  },
};
</script>

<style lang="less" scoped>
// 引入图标
@import "../assets/fonts/iconfont.css";
.article-title {
  height: 20px;
  padding: 6px 20px;
  border-bottom: 1px solid #eaeaea;
  background-color: #f7f7f7;
  border-radius: 5px 5px 0 0;
  font-weight: 400;
  font-size: 15px;
}
.sticky-article {
  position: relative;
  display: block;
  margin-bottom: 1px;
  padding: 20px;
  background-color: #fff;
  border-left: 4px solid transparent;
}
.sticky-article:hover {
  border-left: 4px solid #81c53f;
  background-color: #fafff8;
}
.sticky-article .article-img {
  float: left;
  width: 220px;
  height: 150px;
  margin-right: 15px;
}
.sticky-article .article-img a {
  display: block;
  width: 220px;
  height: 150px;
}
.article-img img {
  width: 220px;
  height: 150px;
}
.sticky-article .article-t {
  margin-top: 1px;
  margin-bottom: 10px;
}
.article-t a {
  display: block;
  color: #000;
}
.article-t a:hover {
  color: #81c53f;
}
.sticky-article .article-txt {
  font-size: 14px;
  color: #888;
  line-height: 24px;
  margin-bottom: 10px;
  overflow: hidden; /*超出长度的文字隐藏*/
  text-overflow: ellipsis; /*文字隐藏以后添加省略号*/
  -webkit-line-clamp: 5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.sticky-article .article-san {
  position: absolute;
  bottom: 5px;
  left: 253px;
  font-size: 12px;
  color: #999999;
  line-height: 21px;
}
.article-san .a-dayuan {
  margin-right: 50px;
}
.article-san .a-time {
  display: inline-block;
  margin-right: 50px;
}
.a-time .time21,
.a-eye .eye21 {
  display: inline-block;
  vertical-align: middle;
}
</style>>

